<template>
  <view class="container">
    <view class="main-content">
      <PaceSelector 
        @race-type-change="handleRaceTypeChange" 
        @time-change="handleTimeChange"
      />
      
      <PaceTable :paceData="paceTableData" />
    </view>
  </view>
</template>

<script>
import PaceSelector from '../../components/PaceSelector.vue';
import PaceTable from '../../components/PaceTable.vue';
import { parseTimeToMinutes, generatePaceTable, getRaceDistance } from '../../utils/calculator.js';

export default {
  components: {
    PaceSelector,
    PaceTable
  },
  data() {
    return {
      raceType: 'half',
      targetTime: '02:00:00',
      paceTableData: []
    }
  },
  created() {
    // 初始化配速表
    this.calculatePaceTable();
  },
  methods: {
    handleRaceTypeChange(type) {
      this.raceType = type;
      this.calculatePaceTable();
    },
    handleTimeChange(timeString) {
      this.targetTime = timeString;
      this.calculatePaceTable();
    },
    calculatePaceTable() {
      const timeInMinutes = parseTimeToMinutes(this.targetTime);
      const distance = getRaceDistance(this.raceType);
      this.paceTableData = generatePaceTable(timeInMinutes, distance);
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.main-content {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>
